<template>
  <AppLayout>
    <div class="teacher-settings">
      <div class="page-header">
        <h1 class="page-title">个人设置</h1>
      </div>

      <div class="settings-content">
        <div class="settings-section">
          <h2 class="section-title">基本信息</h2>
          <div class="setting-item">
            <label class="setting-label">姓名</label>
            <input v-model="settings.name" type="text" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">邮箱</label>
            <input v-model="settings.email" type="email" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">手机号</label>
            <input v-model="settings.phone" type="tel" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">所属院系</label>
            <input v-model="settings.department" type="text" class="setting-input">
          </div>
        </div>

        <div class="settings-section">
          <h2 class="section-title">考试设置</h2>
          <div class="setting-item">
            <label class="setting-label">默认考试时长（分钟）</label>
            <input v-model="settings.defaultExamDuration" type="number" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">允许学生重考</label>
            <select v-model="settings.allowRetake" class="setting-select">
              <option value="true">是</option>
              <option value="false">否</option>
            </select>
          </div>
          <div class="setting-item">
            <label class="setting-label">自动评分</label>
            <select v-model="settings.autoGrade" class="setting-select">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
        </div>

        <div class="settings-section">
          <h2 class="section-title">通知设置</h2>
          <div class="setting-item">
            <label class="setting-label">考试开始通知</label>
            <select v-model="settings.examStartNotification" class="setting-select">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
          <div class="setting-item">
            <label class="setting-label">成绩提交通知</label>
            <select v-model="settings.scoreSubmissionNotification" class="setting-select">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
          <div class="setting-item">
            <label class="setting-label">邮件通知</label>
            <select v-model="settings.emailNotification" class="setting-select">
              <option value="true">启用</option>
              <option value="false">禁用</option>
            </select>
          </div>
        </div>

        <div class="settings-section">
          <h2 class="section-title">安全设置</h2>
          <div class="setting-item">
            <label class="setting-label">当前密码</label>
            <input v-model="settings.currentPassword" type="password" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">新密码</label>
            <input v-model="settings.newPassword" type="password" class="setting-input">
          </div>
          <div class="setting-item">
            <label class="setting-label">确认新密码</label>
            <input v-model="settings.confirmPassword" type="password" class="setting-input">
          </div>
        </div>

        <div class="settings-actions">
          <button @click="saveSettings" class="save-btn">保存设置</button>
          <button @click="resetSettings" class="reset-btn">重置</button>
        </div>
      </div>
    </div>
  </AppLayout>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import AppLayout from '@/components/layout/AppLayout.vue'
import styles from '@/styles/teacher/settings.module.css'

const settings = ref({
  name: '张老师',
  email: 'zhang@example.com',
  phone: '13800138000',
  department: '计算机科学与技术学院',
  defaultExamDuration: 120,
  allowRetake: 'true',
  autoGrade: 'true',
  examStartNotification: 'true',
  scoreSubmissionNotification: 'true',
  emailNotification: 'true',
  currentPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const saveSettings = async () => {
  try {
    // 这里应该调用API保存设置
    console.log('保存设置:', settings.value)
    alert('设置保存成功！')
  } catch (error) {
    console.error('保存设置失败:', error)
    alert('保存设置失败！')
  }
}

const resetSettings = () => {
  if (confirm('确定要重置所有设置吗？')) {
    // 重置为默认值
    settings.value = {
      name: '张老师',
      email: 'zhang@example.com',
      phone: '13800138000',
      department: '计算机科学与技术学院',
      defaultExamDuration: 120,
      allowRetake: 'true',
      autoGrade: 'true',
      examStartNotification: 'true',
      scoreSubmissionNotification: 'true',
      emailNotification: 'true',
      currentPassword: '',
      newPassword: '',
      confirmPassword: ''
    }
  }
}

onMounted(async () => {
  // 这里应该从API加载设置
  console.log('加载教师设置')
})
</script>